<template>
  <div>
    <a-row wrap="true" type="flex" :gutter="[16, 16]">
      <a-col :lg="8" :md="12" :sm="24">
        <a-card class="storage-item disabled">
          <div class="createStorage" @click="addWarehouse()">
            <a-icon class="addStorageIcon" type="plus"/>
            <a class="addStorage"> 新增仓库 </a>
          </div>
        </a-card>
      </a-col>
      <a-col
        :lg="8"
        :md="12"
        :sm="24"
        v-for="(item, index) of storageList"
        :key="index"
      >
        <a-card class="storage-item">
          <div class="storageTop" @click="showDrawer(item)">
            <a-row type="flex" justify="start" align="middle">
              <a-col :span="8">
                <div class="imgBox"><img :src="`${imgBaseURL}${item.img}`" width="40" height="40"/></div>
              </a-col>
              <a-col :span="16">
                <div class="repoMsg">
                  <div class="repoDetail">
                    {{ item.name }} ({{ item.code }})
                  </div>
                  <div class="version">
                    {{ item.address }}
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
          <div class="storageBottom" @click="showDrawer(item)">
            <a-tag v-for="(value, i) in item.type" :key="i">{{ `${value}` }}</a-tag>
          </div>
          <div class="edit" @click="edit(item)"><a-icon type="edit" /></div>
        </a-card>
      </a-col>
    </a-row>

    <a-modal
      :title="model.title"
      :visible="model.visible"
      :confirm-loading="model.confirmLoading"
      :dialog-style="{ top: '20px' }"
      @ok="handleOk"
      @cancel="handleCancel">
      <a-form :form="form" :label-col="{span:4}" :wrapper-col="{span:18}">
        <a-form-item>
          <div class="dropbox">
            <a-upload
              :showUploadList="false"
              :customRequest="uploadImage"
            >
              <div class="upload-picture">
                <img
                  v-if="model.imgName"
                  :src="`${imgBaseURL}${model.imgName}`"
                  width="130px"
                  alt="仓库图片"
                />
                <div v-else>
                  <a-icon class="addStorageIcon" type="plus"/>
                  <div><a class="addStorage"> 添加图片 </a></div>
                </div>
              </div>
            </a-upload>
          </div>
        </a-form-item>
        <a-form-item label="编码" has-feedback>
          <a-input
            v-decorator="['code', {
              rules: [{ required: true, message: '请输入仓库编码!' }],
              initialValue: model.code
            }]"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item label="仓库名" has-feedback>
          <a-input
            v-decorator="['name', {
              rules: [{ required: true, message: '请输入仓库名!' }],
              initialValue: model.name
            }]"
            placeholder="请输入"
          />
        </a-form-item>
        <div class="flex">
          <a-form-item label="负责人" has-feedback :label-col="{span:8}" :wrapper-col="{span:14}">
            <a-input
              v-decorator="['contact', {
                rules: [{ required: true, message: '请输入负责人姓名!' }],
                initialValue: model.contact
              }]"
              placeholder="请输入"
            />
          </a-form-item>
          <a-form-item label="电话" has-feedback :label-col="{span:5}" :wrapper-col="{span:15}">
            <a-input
              v-decorator="['telephone', {
                rules: [{ required: true, message: '请输入联系方式!', trigger: 'blur' },
                        { len:11, message: '请输入正确的电话号码!', trigger: 'blur' }],
                initialValue: model.telephone
              }]"
              placeholder="请输入"
            />
          </a-form-item>
        </div>
        <a-form-item label="分类" has-feedback>
          <!-- v-decorator="['tag', {
                rules: [{ required: true, message: '请输入标签!' }],
                }]"
              placeholder="请输入" -->
          <div>
            <template v-for="(tag, index) in tags">
              <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                <a-tag :key="tag" :closable="true" @close="() => handleClose(tag)">
                  {{ `${tag.slice(0, 20)}...` }}
                </a-tag>
              </a-tooltip>
              <a-tag v-else :key="index" :closable="true" @close="() => handleClose(tag)">
                {{ tag }}
              </a-tag>
            </template>
            <a-input
              v-if="inputVisible"
              ref="input"
              size="small"
              :style="{ width: '78px' }"
              :value="inputValue"
              @change="handleInputChange"
              @blur="handleInputConfirm"
              @keyup.enter="handleInputConfirm"
            />
            <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
              <a-icon type="plus" /> Add New Tag
            </a-tag>
          </div>
        </a-form-item>
        <a-form-item label="省份" has-feedback>
          <a-select
            v-decorator="['province', {
              rules: [{ required: true, message: '请选择省份!' }],
              initialValue: model.province
            }]"
            placeholder="请选择"
            show-search
          >
            <a-select-option v-for="item in areaData" :value="item.name" :key="item.name">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="详细地址" has-feedback>
          <a-textarea
            v-decorator="['address', {
              rules: [{ required: true, message: '请输入详细地址!' }],
              initialValue: model.address
            }]"
            placeholder="请输入"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <warehouseDrawer
      :drawerVisible="drawerVisible"
      :storage="storage"
      @closeDrawer="closeDrawer()"
      ref="warehousDrawer"
    ></warehouseDrawer>
  </div>
</template>
<script>
import { addStorage, getStorageList, updateStorage } from '@/api/repoManage'
import { uploadPicture } from '@/api/common'
import areaData from '@/views/systemManage/utils/province'
import warehouseDrawer from './warehouseDrawer.vue'
export default {
  name: 'WarehouseInfo',
  components: { warehouseDrawer },
  props: {
    provinceName: {
      type: String,
      default: ''
    }
  },
  created () {
    this.getStorage()
  },
  computed: {
  },
  data () {
    return {
      imgBaseURL: `http://122.9.107.215:8080/common/download?fileName=`,
      // 分类
      tags: [],
      inputVisible: false,
      inputValue: '',
      drawerVisible: false,
      storage: null,
      areaData,
      storageList: [],
      model: {
        repoId: null,
        imgName: null,
        code: null,
        contact: null,
        telephone: null,
        address: null,
        province: null,
        name: null,
        visible: false,
        confirmLoading: false,
        title: null
      },
      form: this.$form.createForm(this, { name: 'coordinated' })
    }
  },
  watch: {
    provinceName () {
      this.getStorage()
    }
  },
  methods: {
    search (value) {
      this.model.name = value
      this.getStorage()
      this.model.name = null
    },
    getStorage () {
      const _this = this
      getStorageList({
        province: _this.provinceName,
        name: _this.model.name
      })
        .then(function (res) {
          _this.storageList = res.data.repoList
          // 处理分类字符串
          _this.storageList.forEach(element => {
            element.type = element.type.slice(1, element.type.length - 1).replace(/"/g, '').split(',')
          })
        }).catch(err => {
        _this.$message.error(err.response.msg)
      }).finally(function () {
        })
    },
    addWarehouse () {
      this.model.title = '添加仓库'
      this.model.visible = true
    },
    edit (storage) {
      this.model.imgName = storage.img
      this.model.repoId = storage.id
      this.model.code = storage.code
      this.model.name = storage.name
      this.model.contact = storage.contact
      this.model.telephone = storage.telephone
      this.tags = storage.type
      this.model.province = storage.province
      this.model.address = storage.address
      this.model.title = '编辑仓库'
      this.model.visible = true
    },
    uploadImage (file) {
      const _this = this
      const formData = new FormData()
      formData.append('file', file.file)
      uploadPicture(formData)
        .then(function (res) {
          _this.model.imgName = res.data.fileName
        }).finally(function () {
        })
    },
    handleOk (e) {
      this.model.confirmLoading = true
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.model.title === '添加仓库') {
            addStorage({
              address: values.address,
              code: values.code,
              contact: values.contact,
              img: _this.model.imgName,
              name: values.name,
              province: values.province,
              telephone: values.telephone,
              type: '[' + _this.tags.toString() + ']'
            })
            .then(function (res) {
              _this.model.confirmLoading = false
              _this.handleCancel()
              _this.getStorage()
              _this.$message.success('添加仓库成功')
            })
            .catch(function (err) {
              _this.$message.error(err)
              _this.model.confirmLoading = false
            })
          } else if (this.model.title === '编辑仓库') {
            updateStorage({
              id: _this.repoId,
              address: values.address,
              code: values.code,
              contact: values.contact,
              img: _this.model.imgName,
              name: values.name,
              province: values.province,
              telephone: values.telephone,
              type: '[' + _this.tags.toString() + ']'
            })
            .then(function (res) {
              _this.model.confirmLoading = false
              _this.model.visible = false
              _this.getStorage()
              _this.$message.success('修改仓库信息成功')
            })
            .catch(function (err) {
              _this.$message.error(err.response.data.msg)
              _this.model.confirmLoading = false
            })
          }
        } else {
          _this.model.confirmLoading = false
        }
      })
    },
    handleCancel (e) {
      this.model.visible = false
      this.model.imgName = null
      this.model.repoId = null
      this.model.code = null
      this.model.name = null
      this.model.contact = null
      this.model.telephone = null
      this.tags = null
      this.model.province = null
      this.model.address = null
    },
    showDrawer (storage) {
      this.storage = storage
      this.drawerVisible = true
    },
    closeDrawer () {
      this.drawerVisible = false
    },
    // 分类标签
    handleClose (removedTag) {
      const tags = this.tags.filter(tag => tag !== removedTag)
      this.tags = tags
    },

    showInput () {
      this.inputVisible = true
      this.$nextTick(function () {
        this.$refs.input.focus()
      })
    },
    handleInputChange (e) {
      this.inputValue = e.target.value
    },
    handleInputConfirm () {
      const inputValue = this.inputValue
      let tags = this.tags
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue]
      }
      Object.assign(this, {
        tags,
        inputVisible: false,
        inputValue: ''
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .storage-item {
      text-align: center;
      cursor: pointer;
      height: 130px;
      /deep/ .ant-card-body {
          padding: 18px 24px;
      }
      .createStorage {
          display: flex;
          flex-direction: column;
          align-items: center;
          align-content: center;
          .addStorageIcon{
              font-size: 50px;
              color: #1D4CB3;
          }
          .addStorage {
              margin-top: 10px;
          }
      }
      .storageTop {
        display: flex;
        flex-direction: column;
        position: relative;
          .imgBox {
              width: 60px;
              height: 60px;
              border-radius: 2px;
              img {
                  height: 100%;
                  width: 100%;
              }
          }
          .repoMsg {
              text-align: left;
              margin-left: 0px;
              font-size: 12px;
              .version {
                  margin-top: 6px;
                  font-size: 10px;
                  color: #606266;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
              }
          }
      }
        .storageBottom {
          display: flex;
          margin-top: 10px;
          font-size: 13px;
          justify-content: flex-start;
          flex-wrap: nowrap;
          color: #606266;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .edit {
          position: absolute;
          bottom: 6px;
          right: 10px;
        }
  }
  .upload-picture {
    margin-left: 25%;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    .addStorageIcon{
        font-size: 50px;
        color: #1D4CB3;
    }
    .addStorage {
        margin-top: 10px;
    }
  }
.flex {
display: flex;
}
</style>
